{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}
<form id="provision_create_vm" class="section_content" hidden>
  <div class="row">
    <div class="large-12 columns">
      <h4>
        {{tr "Create Virtual Machine"}}
        <span class="total_cost_div" hidden>
          <small class="cost_value">0.00</small>
          <small>{{tr "COST"}} / {{tr "HOUR"}}</small>
        </span>
      </h4>
    </div>
  </div>
  <div class="row">
    <div class="medium-6 columns">
      <input type="text" id="vm_name" class="provision-input" placeholder="{{tr "Virtual Machine Name"}}"/>
    </div>
    <div class="large-3 medium-6 columns">
      <div class="switch left">
        <input class="switch-input instantiate_pers" id="instantiate_pers" type="checkbox">
        <label class="switch-paddle" for="instantiate_pers">
        </label>
      </div>
      <label class="left">
        &nbsp;&nbsp;
        {{tr "Persistent"}}
        {{{tip (tr "Creates a private persistent copy of the template plus any image defined in DISK, and instantiates that copy")}}}
      </label>
    </div>
    <div class="large-3 medium-6 columns">
      <button href="#" class="button success expanded" type="submit">{{tr "Create"}}</button>
      <div data-alert class="label alert-box-error" hidden></div>
    </div>
  </div>
  <fieldset id="provisionVMInstantiateTemplatesRow">
    <legend>{{tr "Template"}}</legend>
    <div class="row">
      <div class="large-12 columns">
        <ul class="accordion provision_accordion_template" data-accordion data-allow-all-closed="true">
          <li class="accordion-item is-active" data-accordion-item>
            <a href="#provision_dd_template" class="accordion-title">
              <span class="selected_template" hidden>
                <span class="provision-logo selected_template_logo"></span>
                <span class="selected_template_name"></span>
                <span class=""> <i class="fa fa-lg fa-pencil"/></span>
              </span>
            </a>
            <div id="provision_dd_template" class="accordion-content" data-tab-content>
              <div class="row">
                <div class="medium-6 columns">
                  <div class="row collapse">
                    <div class="medium-5 columns">
                      <input type="search" class="provision-search-input" placeholder="Search Template" id="provision_vm_instantiate_template_search"/>
                    </div>
                    <div class="medium-3 columns">
                      <select id="provision_vm_instantiate_templates_owner_filter">
                        <option value="all" selected="selected">{{tr "ALL"}}</option>
                        <option value="mine">{{tr "mine"}}</option>
                        <option value="group">{{tr "group"}}</option>
                        <option value="system">{{tr "system"}}</option>
                      </select>
                    </div>
                    <div class="medium-4 columns">
                      <button type="button" data-toggle="provisionVMInstantiateLabelsDropdown" class="secondary button dropdown"> <i class="fa fa-tags"/> {{tr "Labels"}}
                      </button>
                      <div id="provisionVMInstantiateLabelsDropdown" class="dropdown-pane large labels-dropdown" data-dropdown>
                      </div>
                    </div>
                  </div>
                  <div class="medium-6 columns"></div>
                </div>
              </div>
              <div class="row provision_select_template">
                <div class="small-12 columns">
                  <table id="provision_vm_instantiate_templates_table">
                    <thead hidden>
                      <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>OWNER</th>
                        <th>Labels</th>
                      </tr>
                    </thead>
                    <tbody hidden></tbody>
                  </table>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </fieldset>
  <div class="row">
    <div class="medium-6 small-12 columns">
      <div class="provision_capacity_selector"></div>
    </div>
    <div class="medium-6 small-12 columns columns">
      <div class="provision_disk_selector"></div>
    </div>
  </div>
  <div class="row">
    <div class="large-6 medium-8 small-12 columns">
      <div class="provision_custom_attributes_selector"></div>
    </div>
  </div>
  <div class="row">
    <div class="small-12 columns">
      <div class="provision_network_selector"></div>
    </div>
  </div>
</form>